React Activity vs Display: The Real Difference Explained with Code | React 19.2 New Feature

import { useState, Activity, useEffect, use } from "react"

function App() {
const [showHome, setShowHome] = useState(true)
return (
<>
<h1>Activity in React 19.2</h1>
<button onClick={() => setShowHome(true)}>Home</button>
<button onClick={() => setShowHome(false)}>User Form</button>
{/* <Activity mode={showHome==true?'visible':'hidden'} >
<Home />
</Activity>

<Activity mode={showHome==false?'visible':'hidden'} >
<UserFrom />
</Activity> */}

<div style={{ display: showHome ? 'block' : 'none' }}>
<Home />
</div>

<div style={{ display: !showHome ? 'block' : 'none' }}>
<UserFrom />
</div>



</>
)
}

function Home() {
return (
<h1>Home Page</h1>
)
}

function UserFrom() {

const [count,setCount]=useState(0);
useEffect(()=>{
const interval= setInterval(() => {
setCount(pre=>pre+1)
}, 1000);
return ()=>clearInterval(interval)
},[])

return (
<div>
<h1>{count}</h1>
<h2>User Form</h2>
<input type="text" placeholder="enter name" />
<input type="text" placeholder="enter name" />
<input type="text" placeholder="enter name" />
<input type="text" placeholder="enter name" />

</div>
)
}

export default App